window.onload = async function () {
	try {
		const res = await axios({
			url: '/dashboard',
			method: 'get',
		});
		//console.log(res);
		const { year } = res.data;
		const { salaryData, groupData, provinceData } = res.data;
		//console.log(provinceData);
		// 通过for in循环拿取对象的值,并渲染
		for (const key in res.data.overview) {
			document.querySelector(`[name=${key}]`).innerHTML = res.data.overview[key];
		}

		//------------------通过echarts 生成图表-------------------
		function salaryEchart(year) {
			var myChart = echarts.init(document.querySelector('#line'));

			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '2021全学科薪资走势',
					top: '3%',
					left: '3%',
				},
				xAxis: {
					type: 'category',
					data: year.map((res) => res.month),
					axisLine: {
						lineStyle: {
							type: 'dashed',
							color: '#d3d3d3',
						},
					},
					axisLabel: {
						color: 'balck',
					},
				},
				yAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							type: 'dashed',
						},
					},
				},
				// 提示框
				tooltip: {
					show: true,
				},
				series: [
					{
						data: year.map((res) => res.salary),
						type: 'line',
						// 圆圈
						smooth: true,
						symbolSize: 9,
						lineStyle: {
							width: 5,
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#aed4ff', // 0% 处的颜色
									},
									{
										offset: 0.6,
										color: '#fff', // 100% 处的颜色
									},
								],
								global: false, // 缺省为 false
							},
						},
					},
				],
				grid: {
					// 设置上下左右的间隙
					top: '15%',
					left: '10%',
					right: '10%',
					bottom: '10%',
				},
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
		salaryEchart(year);

		function classSalaryChart(salaryData) {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.querySelector('#salary'));

			// 指定图表的配置项和数据
			const option = {
				title: {
					text: '班级薪资分布',
					top: '3%',
					left: '3%',
				},
				tooltip: {
					trigger: 'item',
				},
				legend: {
					bottom: '3%',
					left: 'center',
				},
				color: ['#fea026', '#5097ff', '#40cdff', '#34d399'],
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: ['60%', '75%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2,
						},
						label: {
							show: false,
							position: 'center',
						},
						labelLine: {
							show: false,
						},
						data: salaryData.map((res) => {
							return {
								value: res.g_count + res.b_count,
								name: res.label,
							};
						}),
					},
				],
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
		classSalaryChart(salaryData);

		//------------------班级每组薪资-------------------
		function groupSalaryChart(groupData) {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.querySelector('#lines'));

			// 指定图表的配置项和数据
			const option = {
				tooltip: {
					show: true,
				},
				xAxis: {
					type: 'category',
					data: groupData[1].map((res) => res.name),
					axisLine: {
						lineStyle: {
							type: 'dashed',
						},
					},
				},
				yAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							type: 'dashed',
						},
					},
				},
				color: [
					{
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: '#3ae8aa', // 0% 处的颜色
							},
							{
								offset: 1,
								color: '#d4f6ea', // 100% 处的颜色
							},
						],
						global: false, // 缺省为 false
					},
					{
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: '#4ba2f1', // 0% 处的颜色
							},
							{
								offset: 1,
								color: '#d4f6ea', // 100% 处的颜色
							},
						],
						global: false, // 缺省为 false
					},
				],
				series: [
					{
						data: groupData[1].map((res) => res.hope_salary),
						type: 'bar',
						name: '期望薪资',
					},
					{
						data: groupData[1].map((res) => res.salary),
						type: 'bar',
						name: '就业薪资',
					},
				],
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			//------------------点击高亮-------------------
			// 方法1
			/* document.querySelector('#btns').onclick = function (e) {
				if (e.target.nodeName === 'BUTTON') {
					//console.log('click');
					//groupSalaryChart(groupData);
					document.querySelector('.btn-blue').classList.remove('btn-blue');
					e.target.classList.add('btn-blue');
				}
			}; */
			//方法2
			const btns = document.querySelectorAll('#btns button');
			btns.forEach((btn) => {
				btn.onclick = function () {
					//console.log('click');
					btns.forEach((item) => item.classList.remove('btn-blue'));
					this.classList.add('btn-blue');

					//-------------更新数据-------------
					// innerHTML 可能有问题，要trim去两边
					const index = this.innerHTML.trim();
					//console.log(index);
					option.xAxis.data = groupData[index].map((r) => r.name);
					option.series[0].data = groupData[index].map((r) => r.hope_salary);
					option.series[1].data = groupData[index].map((r) => r.salary);
					// 调用该方法，重新加载数据 ------官方方法
					myChart.setOption(option);
				};
			});
		}
		groupSalaryChart(groupData);

		//------------------男女薪资分布-------------------
		function genderSalaryChart(salaryData) {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.querySelector('#gender'));

			// 指定图表的配置项和数据
			const option = {
				title: [
					{
						text: '男女薪资分布',
						left: '3%',
						top: '3%',
					},
					{
						text: '男生',
						left: 'center',
						top: '45%',
					},
					{
						text: '女生',
						left: 'center',
						top: '85%',
					},
				],
				tooltip: {
					trigger: 'item',
				},
				color: ['#fea026', '#5097ff', '#40cdff', '#34d399'],
				series: [
					{
						type: 'pie',
						radius: ['20%', '30%'],
						center: ['50%', '30%'],
						data: salaryData.map((item) => {
							return {
								name: item.label,
								value: item.b_count,
							};
						}),
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)',
							},
						},
					},
					{
						type: 'pie',
						radius: ['20%', '30%'],
						center: ['50%', '70%'],
						data: salaryData.map((item) => {
							return {
								name: item.label,
								value: item.g_count,
							};
						}),
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)',
							},
						},
					},
				],
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
		genderSalaryChart(salaryData);

		//------------------地图-------------------

		const mapChart = (provinceData) => {
			const myEchart = echarts.init(document.querySelector('#map'));
			const dataList = [
				{ name: '南海诸岛', value: 0 },
				{ name: '北京', value: 0 },
				{ name: '天津', value: 0 },
				{ name: '上海', value: 0 },
				{ name: '重庆', value: 0 },
				{ name: '河北', value: 0 },
				{ name: '河南', value: 0 },
				{ name: '云南', value: 0 },
				{ name: '辽宁', value: 0 },
				{ name: '黑龙江', value: 0 },
				{ name: '湖南', value: 0 },
				{ name: '安徽', value: 0 },
				{ name: '山东', value: 0 },
				{ name: '新疆', value: 0 },
				{ name: '江苏', value: 0 },
				{ name: '浙江', value: 0 },
				{ name: '江西', value: 0 },
				{ name: '湖北', value: 0 },
				{ name: '广西', value: 0 },
				{ name: '甘肃', value: 0 },
				{ name: '山西', value: 0 },
				{ name: '内蒙古', value: 0 },
				{ name: '陕西', value: 0 },
				{ name: '吉林', value: 0 },
				{ name: '福建', value: 0 },
				{ name: '贵州', value: 0 },
				{ name: '广东', value: 6 },
				{ name: '青海', value: 0 },
				{ name: '西藏', value: 0 },
				{ name: '四川', value: 0 },
				{ name: '宁夏', value: 0 },
				{ name: '海南', value: 0 },
				{ name: '台湾', value: 0 },
				{ name: '香港', value: 0 },
				{ name: '澳门', value: 0 },
			];

            provinceData.forEach(p =>{
                dataList.find(item =>{
                    // 通过indexOf找部分字段在其他字段中的索引位置
                    // 此处：简写省份在完整省份中有没有存在
                    if(p.name.indexOf(item.name) === 0){
                        item.value = p.value;
                    }
                })
            })

			let option = {
				title: {
					text: '籍贯分布',
					top: 10,
					left: 10,
					textStyle: {
						fontSize: 16,
					},
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b}: {c} 位学员',
					borderColor: 'transparent',
					backgroundColor: 'rgba(0,0,0,0.5)',
					textStyle: {
						color: '#fff',
					},
				},
				visualMap: {
					min: 0,
					max: 6,
					left: 'left',
					bottom: '20',
					text: ['6', '0'],
					inRange: {
						color: ['#ffffff', '#0075F0'],
					},
					show: true,
					left: 40,
				},
				geo: {
					map: 'china',
					roam: false,
					zoom: 1.0,
					label: {
						normal: {
							show: true,
							fontSize: '10',
							color: 'rgba(0,0,0,0.7)',
						},
					},
					itemStyle: {
						normal: {
							borderColor: 'rgba(0, 0, 0, 0.2)',
							color: '#e0ffff',
						},
						emphasis: {
							areaColor: '#34D39A',
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							shadowBlur: 20,
							borderWidth: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
				},
				series: [
					{
						name: '籍贯分布',
						type: 'map',
						geoIndex: 0,
						data: dataList,
					},
				],
			};
			myEchart.setOption(option);
		};
		mapChart(provinceData);
	} catch (err) {
		console.dir(err);
	}
};
